<template>
    <div >
      <el-input v-model="keyword" placeholder="请输入地点"></el-input>
      <baidu-map :style="style" @ready="ready">
          <bm-local-search :keyword="keyword" :auto-viewport="true" style="display: none"></bm-local-search>
      </baidu-map>
    </div>
</template>

<script>
export default {
  name: 'baidumap',
  props: {
    mapInfo: {
      type: Object,
      required: true
    },
    height: {
      type: Number,
      default: 400
    },
  },
  // props: ['mapInfo','height'],
  computed: {
    style () {
      return {
        width: '100%',
        height: this.height + 'px',
        marginTop: '15px'
      }
    }
  },
  data () {
    return {
      keyword: '',
      ctiy: '广西',
      BMap: null
    }
  },
  // mounted(){
  //   this.keyword = this.mapInfo.xxdz
  // },
  created() {
    this.keyword = this.mapInfo.xxdz
  },
  watch: {
    // mapInfo: {
    //   handler(newVal) {
    //     console.log(newVal,'dsada')
    //   },
    //   deep: true,
    //   immediate:true
    // }
  },
  methods:{
    ready({ BMap, map }) {
      var _this = this
      this.BMap = BMap
      map.centerAndZoom(this.ctiy,11)
      map.enableScrollWheelZoom()
      map.setZoom(4)
      map.addControl(new BMap.NavigationControl())
      map.addEventListener('click', function(e){
        _this.lngLat(e)
      })
    },
    lngLat(e){
      // let longitude = e.point.lng    //经度:
      // let latitude = e.point.lat    //纬度

      console.log(e, 'eeeeee')
      console.log(e.point.lng,'经度');
      console.log(e.point.lat);

      let GC = new this.BMap.Geocoder() // 解析器 解析经纬度返回地址信息
      GC.getLocation(e.point, (res) => {
        this.keyword = res.address
        this.$emit('choose', res)
      })
    }
  }
}
</script>
